<template>
  <div id="myChart" :style="{ width: '315px', height: '400px' }"></div>
</template>
<script>
// import echarts from 'echarts'
import { mapGetters, mapState } from 'vuex';
export default {
  props: {
    aces_a: Object,
    aces_b: Object,
    name: String
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(['SET_USERINFO'])
  },
  data() {
    return {
      show: null,
      items_a: []
    };
  },
  watch: {
    aces_a: {
      immediate: true, // 这句重要
      handler(val) {
        this.items_a = val;
        this.showdata();
      }
    }
  },
  mounted() {
    this.showdata();
  },
  methods: {
    showdata() {
      console.log(this.aces_a);
      let myChart = this.$echarts.init(document.getElementById('myChart'));
      myChart.setOption({
        legend: {
          data: [`${this.SET_USERINFO.name}`, `${this.name}`]
        },
        radar: {
          name: {
            textStyle: {
              color: '#101010',
              borderRadius: 3,
              padding: [0, -10, 0]
            }
          },
          indicator: [
            { name: '破发成功率', max: 100 },
            { name: '一发\n成功率', max: 100 },
            { name: '二发得分率', max: 100 },
            { name: '接发得分率', max: 100 },
            { name: '一发\n得分率', max: 100 }
          ]
        },
        series: [
          {
            name: '',
            type: 'radar',
            data: [
              {
                value: [this.aces_a.success_game_point, this.aces_a.first_send_success, this.aces_a.second_send_score, this.aces_a.catch_score, this.aces_a.first_send_score],
                name: `${this.SET_USERINFO.name}`
              },
              {
                value: [this.aces_b.success_game_point, this.aces_b.first_send_success, this.aces_b.second_send_score, this.aces_b.catch_score, this.aces_b.first_send_score],
                name: `${this.name}`
              }
            ]
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
#myChart {
  margin: auto;
}
</style>
